<template>
  <input
    type="text"
    :class="$style['input-warpper']"
    :placeholder="placeholder"
    :value="inputValue"
    @input="getInputValue"
  />
</template>

<script>
export default {
  name: 'PaperInput',
  props: {
    value: {
      type: [String, undefined],
      default: undefined,
    },
    placeholder: {
      type: String,
      default: '请输入内容',
    },
  },
  data() {
    return {
      inputValue: this.value,
    };
  },
  methods: {
    getInputValue(e) {
      const event = e || window.event;
      const target = event.srcElement || event.taget;
      this.inputValue = target.value;
      this.$emit('change', this.inputValue);
    },
  },
};
</script>

<style lang="less" module>
@import '../../global.less';
.input-warpper {
  width: 100%;
  background-color: @background-color;
  height: 40px;
  border: none;
  border-radius: 4px;
  // outline: 1px solid chartreuse;
  padding: 10px;
  // &:hover {
  //   border: 1px solid @primary-color;
  // }

  /* WebKit, Blink, Edge */
  &::-webkit-input-placeholder {
    color: @placeholder-color;
  }
  /* Mozilla Firefox 4 to 18 */
  &:-moz-placeholder {
    color: @placeholder-color;
  }
  /* Mozilla Firefox 19+ */
  &::-moz-placeholder {
    color: @placeholder-color;
  }
  /* Internet Explorer 10-11 */
  &:-ms-input-placeholder {
    color: @placeholder-color;
  }
}
</style>
